.load-box {
	width: 150rpx;
	height: 150rpx;
	background-color: #141c29;
	opacity: 0.7;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 45%;
	left: 40%;
	border-radius: 25rpx;

	.loader {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		aspect-ratio: 1;
		position: relative;
		.dot {
			position: absolute;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			background: #0dcfa5;
			transform: translate(-50%, -50%);
			animation: a-move 4s linear infinite;
			z-index: 2;
			opacity: 1;
			&.tail1 {
				animation-delay: 0.04s;
				opacity: 1;
			}
			&.tail2 {
				animation-delay: 0.08s;
				opacity: 1;
			}
			&.tail3 {
				animation-delay: 0.12s;
				opacity: 1;
			}
			&.tail4 {
				animation-delay: 0.16s;
				opacity: 1;
			}
			&.tail5 {
				animation-delay: 0.2s;
				opacity: 1;
			}
			&.tail6 {
				animation-delay: 0.24s;
				opacity: 1;
			}
			&.tail7 {
				animation-delay: 0.28s;
				opacity: 1;
			}
			&.tail8 {
				animation-delay: 0.32s;
				opacity: 1;
			}
		}
	}

	.loader:before,
	.loader:after {
		content: "";
		position: absolute;
		width: 8px;
		aspect-ratio: 1;
		border-radius: 50%;
	}

	.loader:before {
		background: #0dcfa5; /* A元素（绿色） */
		top: 50%;
		left: 50%; /* 初始位置改为圆心 */
		transform: translate(-50%, -50%);
		animation: a-move 4s linear infinite;
		box-shadow: 0 0 16px 4px #1d6f5d66;
		z-index: 2;
	}

	.loader:after {
		background: #f7d053; /* B元素（黄色） */
		top: 50%;
		left: 100%;
		transform: translate(-50%, -50%);
		animation: b-move 4s linear infinite;
		z-index: 1;
	}

	/* A元素动画：上半圆（左→右）→静止→下半圆（右→左）→静止 */
	@keyframes a-move {
		0% {
			transform: translate(-50%, -50%) rotate(180deg) translateX(10px); /* 左侧起始 */
		}
		25% {
			transform: translate(-50%, -50%) rotate(360deg) translateX(10px); /* 上半圆到右侧 */
		}
		25.1%,
		50% {
			transform: translate(-50%, -50%) rotate(360deg) translateX(10px); /* 静止在右侧 */
		}
		75% {
			transform: translate(-50%, -50%) rotate(540deg) translateX(10px); /* 下半圆回左侧 */
		}
		75.1%,
		100% {
			transform: translate(-50%, -50%) rotate(540deg) translateX(10px); /* 静止在左侧 */
		}
	}

	/* B元素动画：静止→直线（右→左）→静止→直线（左→右） */
	@keyframes b-move {
		0%,
		25% {
			left: 100%; /* 静止在右侧 */
			transform: translate(-50%, -50%);
		}
		50% {
			left: 0%; /* 从右到左直线移动 */
			transform: translate(-50%, -50%);
		}
		50.1%,
		75% {
			left: 0%; /* 静止在左侧 */
			transform: translate(-50%, -50%);
		}
		100% {
			left: 100%; /* 从左到右直线移动 */
			transform: translate(-50%, -50%);
		}
	}
}